<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title></title>
		<link rel="stylesheet" type="text/css" media="screen"
		href="css/themes/redmond/jquery-ui-1.8.4.custom.css" />
	<link rel="stylesheet" type="text/css" media="screen"
		href="js/jqGrid-3.7.2/src/css/ui.jqgrid.css" />
	<script src="js/jqGrid-3.7.2/js/jquery-1.4.2.min.js" type="text/javascript"></script>
	<script src="js/jqGrid-3.7.2/js/i18n/grid.locale-en.js" type="text/javascript"></script>
	<script src="js/jqGrid-3.7.2/js/jquery.jqGrid.min.js" type="text/javascript"></script>
	</head>
	
	<!--  <script src="js/jqGrid-3.7.2/src/grid.loader.js" type="text/javascript"></script>-->
	<!-- <script type="text/javascript"> jQuery.extend(jQuery.jgrid.defaults, { shrinkToFit :false }); </script><!--  --> 
	<script type="text/javascript">
	var lastid=-1;
	jQuery().ready(function (){
		jQuery("#list19").jqGrid({
		   	url: 'books.xml',
			datatype: "xml",
		   	colNames:["Author","Title", "Price", "Published Date"],
		  colModel:[
		   		{name:"Author",index:"Author",  xmlmap:"ItemAttributes>Author"},
		   		{name:"Title",editable:true,index:"Title", xmlmap:"ItemAttributes>Title"},
		   		{name:"Price",index:"Manufacturer", align:"right",xmlmap:"ItemAttributes>Price", sorttype:"float"},
		   		{name:"DatePub",index:"ProductGroup", xmlmap:"ItemAttributes>DatePub",sorttype:"date"}
		   	],
			height:250,
			autowidth:true,
			width:1000,
		   	rowNum:10,
		   	pager:'#pager19',
		   	rowList:[10,20,30],
		    viewrecords: true,
			loadonce: true,
			xmlReader: {
					root : "Items",
					row: "Item",
					repeatitems: false,
					id: "ASIN"
			},
			onSelectRow: function(id){
		      if(id && id!=lastid){  
		      	 var obj=$("#list19").jqGrid("getRowData", id);  
		       //  jQuery('#list19').restoreRow(lastid);
		         var b=$("list19").jqGrid("delRowData",id);
		        // alert(b);
		         lastid=id;    
		      }    
		      //jQuery('#list19').editRow(id, true);    
		   }
			,
			caption: "XML Mapping xml"
			
		});
		jQuery("#pager19").jqGrid('navGrid','#pager19',
			{}, //options
			{height:280,reloadAfterSubmit:false}, // edit options
			{height:280,reloadAfterSubmit:false}, // add options
			{reloadAfterSubmit:false}, // del options
			{} // search options	
			);
	});
	
	function test(){
		
		alert();
	}
	
	</script>

	<body topmargin="3px">
		<div align="center"><table id="list19"></table></div>
		<div id="pager19"></div>
		<% 
		%>
		<form >
			<input type="text" name="test" />
			<input type="button"  onclick="javascript:test();" value="submit" />
		</form>
	</body>
</html>
